<%
/* // chunks 示例（生产环境）
chunks = {
  "chunk-vendors": { 
    size: 2186564, entry: "/js/chunk-vendors.4a66b167.js", hash: "d63b17ea4e1109392285", css: []
  },
  app: { 
    size: 52875, entry: "/js/app.8c9d2182.js", hash: "5767db9a60f87f277577", css: ["/css/app.d4a6b4ed.css"]
  },
  red: {
    size: 441228, entry: "/js/red.0c3b9afc.js", hash: "87c353d0828b012887ae", css: ["/css/red.ed2cf700.css"]
  }
}
*/
  var chunks = htmlWebpackPlugin.files.chunks
  var themes = {}
  var notThemeEntries = ['app', 'compat', 'chunk-vendors']; // 不是主题的那些entry
  for (var theme in chunks) {
    if (!notThemeEntries.includes(theme)) {
      themes[theme] = chunks[theme].css[0]
    }
  }
%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel=icon href=favicon.ico type="image/x-icon" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <title>我的云音乐</title>

  <!-- 百度自动收录脚本 -->
  <script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
  </script>
  <!-- 百度统计 -->
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?534daa829424d7214d01e1ed40dcff21";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    

  <!-- 判断兼容性、是否支持vue -->
  <script>
    try {
      Object.defineProperty({}, "k", {});
    } catch (e) {
      location = './no-compat.html';
    }
    var DEFAULT_VERSION = 8.0;
    var ua = navigator.userAgent.toLowerCase();
    var isIE = ua.indexOf("msie") > -1;
    var safariVersion;
    if (isIE) {
      safariVersion = ua.match(/msie ([\d.]+)/)[1];
    }
    if (safariVersion <= DEFAULT_VERSION) {
      location = './no-compat.html';
    };
  </script>

  <!-- 写在vue组件中的样式 -->
  <link rel="stylesheet" href="<%= chunks['app'].css[0] %>">
  <% if (chunks['chunk-vendors'] && chunks['chunk-vendors'].css[0]) { %>
  <link rel="stylesheet" href="<%= chunks['chunk-vendors'].css[0] %>">
  <% } %>

  <!-- iconfont 字体图标临时路径 -->
  <style>
    [class*="icon-"],
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }
    body {
      min-width: 900px;
    }
  </style>

  <!-- 主题 -->
  <link id="_theme_link" rel="stylesheet" href="">

  <!-- 主题文件 -->
  <script>
    var themes = <%= JSON.stringify(themes) %>;
    var chunks = <%= JSON.stringify(chunks) %>;
    var currentTheme = localStorage.getItem('_theme_name') // ie 中 file:// 打开报错

    if (!currentTheme) {
      for (var name in themes) {
        currentTheme = name
        break
      }
    }
    window.$theme = currentTheme

     // version 1、主题切换的时候会出错样式变形问题
    // window.changeTheme = function (theme) {
    //   var link = document.getElementById('_theme_link')
    //   var style = themes[theme]
    //   if (style) {
    //     currentTheme = theme
    //     link.setAttribute('href', style)
    //     // ie 中 file:// 打开报错
    //     localStorage.setItem('_theme_name', theme)

    //     window.$theme = theme
    //     return true
    //   } else {
    //     throw new Error('没有找到主题样式:', theme)
    //   }
    // }
    
    //  version 2
    window.changeTheme = function (theme) {
      var link = document.createElement('link')
      var styleSrc = themes[theme]
      if (styleSrc) {
        link.setAttribute('id', 'theme_link-' + theme)
        link.setAttribute('rel', 'stylesheet')
        link.setAttribute('href', styleSrc)
        link.onload = function() {
          // 旧节点删除
          var oldLink = document.getElementById('_theme_link')
          document.head.removeChild(oldLink)
          link.setAttribute('id', '_theme_link')
        }
        document.head.appendChild(link)

        window.$theme = theme
        localStorage.setItem('_theme_name', theme)
        return true
      } else {
        throw new Error('没有找到主题样式:', theme)
      }
    }

    changeTheme(currentTheme)
  </script>

  <!-- ie 浏览器判断、是ie 浏览器加载 babel-polyfill -->
  <!--[if IE]>
      <script src="<%= chunks['compat'].entry %>"></script>
  <![endif]-->
</head>

<body>
  <noscript>
    <strong>您的浏览器不支持脚本，或您的的浏览器禁用了脚本</strong>
  </noscript>
  <div id="app"></div>

  <script src="<%= chunks['app'].entry %>"></script>
  <script src="<%= chunks['chunk-vendors'].entry %>"></script>
</body>

</html>